<template>
	<!-- 状态栏 -->
	<view v-if="size !== 0" class="todo-header">
		<!-- 状态栏的左侧 -->
		<view class="todo-header__left">
			<text class="active-text">{{tabName}}</text>
			<text>{{size}}条</text>
		</view>
		<!-- 状态栏的右侧 -->
		<view class="todo-header__right">
			<view class="todo-header__right-item" :class="{'active-tab':activeIndex === 0}" @click="tab(0)">全部</view>
			<view class="todo-header__right-item" :class="{'active-tab':activeIndex === 1}" @click="tab(1)">待办</view>
			<view class="todo-header__right-item" :class="{'active-tab':activeIndex === 2}" @click="tab(2)">已完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			size: {
				type: Number,
				default: 0
			}
		},
		data(){
			return{
				tabName:"全部",
				activeIndex:0
			}
		},
		methods:{
			tab(index){
				this.activeIndex = index
				if(index===0){
					this.tabName="全部"
				}else if(index===1){
					this.tabName="待办"
				}else if(index===2){
					this.tabName="已完成"
				}
				this.$emit("onTabClick",index)
			}
		}
	}
</script>

<style>
	.todo-header {
		position: fixed;
		top: 48px;
		left: 0;
		display: flex;
		align-items: center;
		padding: 0 15px;
		font-size: 12px;
		color: #333333;
		width: 100%;
		height: 45px;
		box-sizing: border-box;
		box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.1);
		background: #FFFFFF;
		z-index: 10;
	}

	.todo-header__left {
		width: 100%;
	}

	.active-text {
		font-size: 14px;
		color: #279abf;
		padding-right: 10px;

	}

	.todo-header__right {
		flex-shrink: 0;
		display: flex;
	}

	.todo-header__right-item {
		padding: 0 5px;
	}

	.active-tab {
		color: #279abf;
	}
</style>
